<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
 <script src="./rem.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.content{
	background: red;
}
.active{
	position: relative;
}
.add{
	position: absolute;
	top:0;
	min-height: 4rem;
	width:13rem;
	background: #fff;
	z-index: 9;
	border:0.08rem dashed pink;
	padding: .5rem;
}
.textarea{
	min-width: 0.2rem;
	min-height: 0.4rem;
	/* position: absolute;
	z-index: 9999; */
}
.parent{
	/* border: 1px solid transparent;
	outline: none; */
}
.add span{
	padding: 3px;
	border: 1px solid pink;
	border-radius: 8px;
}
.upimg{
	opacity: 0;
    width: 100%;
    height: 100%;
}
.upspan{
	position: absolute;
    width: 93px;
    height: 34px;
	overflow: hidden;
}
.a{
	position: absolute;
	top: 0;
	left: 0;
}
</style>
<body>
<div id="content">
	<div>
		<div>
			啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
			<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
		</div>
		<div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
		<div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
	</div>
	<p><img src="http://statics.76sd.com/data/files/store/20190306/5c7f5535904ad.png" alt="" /></p>
	<p><strong>这是</strong>这是一段可编辑的段落。请试着编辑该文本。</p>
	<p>这是一段可编辑的段落。请试着编辑该文本。</p>
	<p>这是一段可编辑的段落。请试着编辑该文本。</p>
	<p>这是一段可编辑的段落。请试着编辑该文本。</p>
	<p></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// ready 方法
jQuery(function($){
	$(document).on('click','.active',function(event){
		event.stopPropagation();
// 		$(".active").removeClass("content");
		$(".active>.add").remove();
// 		$(this).addClass("content");
		let _html= $(this).text()
		var html = '<div class="add">'
			html+='<p><textarea class="parent">'+ _html +'</textarea></p>'
			html+='<span class="editBtn">edit</span>&nbsp;<span class="delBtn">del</span><span class="upspan"><a class="a">UpImg</a><input class="upimg" type="file" value="上传图片" /></span>'
		html+='</div>'
		$(this).append(html)
// 		$('<div class="add"><p class="parent"></p><span class="addBtn">add</span> | <span onclick="del(this)">del</span></div>' ).appendTo(this);
		// $('.parent').html(_html);
		
	})
	$(".add>span").click(function(event){
		event.stopPropagation();
	})
	$('.active').on('click','.parent', function (e) {
		// 清楚动态添加事件的冒泡事件
		e.stopPropagation()
	});
	$('.active').on('click','.editBtn', function (e) {
		e.stopPropagation()
		var textVal = $(this).parent().children().find('.parent').val()
		// $(".active>.add").remove();
		// console.log($(this).parent().text())
		$(this).parent().parent().text(textVal)
	})
	$('.active').on('click','.delBtn', function (e) {
		// 清楚动态添加事件的冒泡事件
		e.stopPropagation()
		$(this).parent().parent().remove()
	});
	$('.active').on('click','.upspan', function (e) {
		// 清楚动态添加事件的冒泡事件
		e.stopPropagation()
	});
})
// 递归函数
    function getChildNode(node){
        var nodeList = node.childNodes;
        for(var i = 0;i < nodeList.length;i++){
            var childNode = nodeList[i];
            if(childNode.nodeType == 1){
            	childNode.className = "active"
                getChildNode(childNode);
            }
        }
    }
	getChildNode(document.getElementById("content"));
</script>
</body>
</html>
